<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        th {
            width: 100px;
        }

        input {
            width: 200px;
            box-sizing: border-box;
        }

        select {
            width: 200px;
        }

        #tankuang {
            position: fixed;
            top: 150px;
            left: 50%;
            transform: translateX(-50%);
            width: 200px;
            height: 230px;
            background-color: red;
        }
        #tankuang>button{
            width: 50px;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <span>序号：</span><br>
            <input id="uid" type="text" name="" id="" value="DS-"><br>
            <span>角色名：</span><br>
            <input id="uname" type="text" name="" id=""><br>
            <span>系列：</span><br>
            <select name="" id="classType">
                <option value="雷">雷</option>
                <option value="火">火</option>
                <option value="土">土</option>
                <option value="木">木</option>
                <option value="金">金</option>
                <option value="水">水</option>
                <option value="暗">暗</option>
            </select><br>
            <span>擅长：</span><br>
            <select name="" id="classname">
                <option value="攻击">攻击</option>
                <option value="体质">体质</option>
                <option value="敏捷">敏捷</option>
                <option value="防御">防御</option>
            </select><br>
            <button @click="add()">创建角色</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th>序号</th>
                    <th>角色名</th>
                    <th>系列</th>
                    <th>擅长</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(value,index) in school">
                    <th>{{'DS-'+value.id}}</th>
                    <th>{{value.name}}</th>
                    <th>{{value.classType}}</th>
                    <th>{{value.classname}}</th>
                    <th>
                        <button @click="bianji(index)">编辑</button>
                        <button class="del" @click="remove(index)">删除</button>
                    </th>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>
                        <button @click="sheng()">升序</button>
                        <button @click="jiang()">降序</button>
                    </th>
                </tr>
            </tfoot>
        </table>

        <div id="tankuang" v-show="isflag">
            <span>序号：</span><br>
            <input id="uid1" type="text" name="" id="" value="DS-"><br>
            <span>角色名：</span><br>
            <input id="uname1" type="text" name="" id=""><br>
            <span>系列：</span><br>
            <select name="" id="classType1">
                <option value="雷">雷</option>
                <option value="火">火</option>
                <option value="土">土</option>
                <option value="木">木</option>
                <option value="金">金</option>
                <option value="水">水</option>
                <option value="暗">暗</option>
            </select><br>
            <span>擅长：</span><br>
            <select name="" id="classname1">
                <option value="攻击">攻击</option>
                <option value="体质">体质</option>
                <option value="敏捷">敏捷</option>
                <option value="防御">防御</option>
            </select><br>
            <br>
            <button @click="quxiao()">取消</button>
            <button @click="baochun()">保存</button>
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./js/角色.js"></script>
</body>

</html>